<style lang="scss">
@import '../static/common/variable.scss';

.info {
    width: 100%;
    padding: $pad;

    h3 {
        padding: 10px 0;
        font-size: 20px;
    }

    section {
        margin-top: 20px;

        p {
            padding: 15px;
            font-size: 18px;
            border-bottom: 1px solid #f0f0f0;
        }

        input,
        span {
            // background-color: transparent;
            font-size: 17px;
            color: #666;
        }

        .btn {
            margin-right: 10px;
            padding: 15px 20px;
        }

        .btn-modify {
            background-color: $bgColor;
            color: #fff;
        }
        .btn-modify.active {
            background-color: #409F01;
        }
        .btn-save.active {
            background-color: #118DFE;
            color: #fff;
        }
    }

}
</style>
<template>
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="个人资料" sub-title="" @back="jumpTo" />
    <div class="info">
        <!-- <h3>个人资料</h3> -->

        <section>
            <p>昵称: <input v-model="form.user_name" type="text" :disabled="disabled"></p>
            <p>账号: <input v-model="form.user_acc" type="text" disabled></p>
            <p>手机: <input v-model="form.user_tel" type="text" :disabled="disabled"></p>
            <p>年龄: <input v-model="form.user_age" type="text" :disabled="disabled"></p>
            <p>性别: <input v-model="form.user_sex" type="text" :disabled="disabled" maxlength="1"></p>
            <p>地址: <input v-model="form.user_address" type="text" :disabled="disabled"></p>
            <p>注册时间: <span>{{ formatime(form.user_create_time) }}</span></p>
        </section>
        <section>
            <button :class="['btn', 'btn-modify', {active: isEdit}]" @click="modifyInfo">编辑资料</button>
            <button :class="['btn', 'btn-save', isEdit== false ? 'active':'']" @click="saveInfo">保存</button>
        </section>
    </div>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getUserInfoFn, modifyUserInfoFn } from '../api/index';
import { message } from 'ant-design-vue';


export default {
    setup() {
        let form = reactive({
            user_acc: '',
            user_src: '',
            user_name: '',
            user_age: '',
            user_sex: '',
            user_address: '',
            user_tel: '',
            user_create_time: '',
            file: null
        })

        let disabled = ref(true);
        let isEdit = ref(true);

        const router = useRouter();

        const jumpTo = ()=> {
            router.push({
                path:'/my'
            });
        }

        const getUserInfo = async () => {
            let token = localStorage.getItem('TOKEN');
            await getUserInfoFn({ token })
                .then(
                    (content: any) => {
                        console.log(1.0, content)
                        let { code, msg, data } = content;
                        if (code == 200) {
                            // 解构赋值
                            let { user_tel, user_acc, user_create_time, user_src, user_name, user_age, user_sex, user_address } = data[0];
                            form.user_acc = user_acc;
                            form.user_create_time = user_create_time;
                            form.user_src = user_src;
                            form.user_name = user_name;
                            form.user_age = user_age;
                            form.user_sex = user_sex;
                            form.user_address = user_address;
                            form.user_tel = user_tel;
                        }
                        else {
                            console.log(msg);
                        }
                    }
                )
        }

        // 格式化时间
        const formatime = (date: Date | string | any) => {
            if (date) {
                let dt = new Date(date);
                return dt.toLocaleDateString() + " " + dt.toLocaleTimeString();
            }
            else {
                return '0000-00-00 00:00:00';
            }
        }

        getUserInfo();

        // 可编辑
        const modifyInfo = () => {
            disabled.value = false;
            isEdit.value = false;
        }

        // 保存资料
        const saveInfo = async () => {
            let { user_sex, user_age, user_address, user_tel, user_name } = form;
            // console.log({user_sex,user_age, user_address, user_tel,user_name})
            if (user_sex && user_age && user_address && user_tel && user_name) {
                let token = localStorage.getItem('TOKEN');
                // 修改个人资料
                await modifyUserInfoFn({ user_sex, user_age, user_address, user_tel, user_name, token })
                    .then(
                        (content: any) => {
                            console.log(content)
                            let { code, msg } = content;
                            if (code == 200) {
                                message.success(msg)
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )

                disabled.value = true;//禁止编辑
            }
            else {
                message.error('缺少参数。。。')
            }
            // 控制修改按钮的背景色
            isEdit.value = true;
        }

        return {
            form,
            disabled,
            formatime,
            modifyInfo,
            saveInfo,
            jumpTo,
            isEdit
        }
    }
}

</script>